<template>
  <div class="score-progress bg-white p-4 rounded-lg">
    <div class="flex items-center justify-between mb-4">
      <span class="text-gray-900 font-medium">{{}}</span>
      <div class="flex items-center">
        <span class="text-[#FF4D4F] font-medium mr-1">{{ totalScore }}</span>
        <span class="text-gray-400">分</span>
      </div>
    </div>

    <div class="space-y-3">
      <div v-for="item in progressItems" :key="item.label" class="progress-item">
        <div class="flex justify-between mb-1">
          <span class="text-gray-600 text-sm">{{ item.label }}</span>
          <span class="text-gray-600 text-sm">{{ item.score }}</span>
        </div>
        <div class="h-2 bg-gray-100 rounded-full overflow-hidden">
          <div 
            class="h-full rounded-full transition-all duration-300"
            :class="item.color"
            :style="{ width: `${item.score}%` }"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  progressItems: {
    type: Array,
    required: true,
    validator: (items) => {
      return items.every(item => 
        'label' in item && 
        'score' in item && 
        'color' in item
      );
    }
  },
  totalScore: {
    type: Number,
    required: true
  }
});
</script>

<style lang="less" scoped>
.progress-item {
  .bg-red-500 {
    background-color: #FF4D4F;
  }
  .bg-yellow-500 {
    background-color: #FAAD14;
  }
  .bg-blue-500 {
    background-color: #1890FF;
  }
}
</style> 